/* eslint-disable @typescript-eslint/no-explicit-any */
import { defineComponent, nextTick, PropType, ref, Ref, watch } from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import { IPanelRawItem } from '@ibiz/model-core';
import { SearchDisplayBarController } from './controller';
import './search-display-bar.scss';

export const SearchDisplayBar = defineComponent({
  name: 'SearchDisplayBar',
  props: {
    modelData: {
      type: Object as PropType<IPanelRawItem>,
      required: true,
    },
    controller: {
      type: SearchDisplayBarController,
      required: true,
    },
  },
  setup(prop) {
    const ns = useNamespace('search-display-bar');
    const c = prop.controller;

    const items: Ref<IData[]> = ref([]);
    const searchForm = (c.panel.view as any).ctx.controllersMap.get(
      'searchform',
    );
    const clearAll = () => {
      searchForm.state.data = {};
      nextTick(() => {
        searchForm.search();
      });
    };
    const remove = (item: IData) => {
      let target = items.value.filter((ele: IData) => {
        return ele.formItemName === item.formItemName;
      });
      if (target && target.length > 1) {
        target = target.filter((ele: IData) => {
          return ele.id !== item.id;
        });
        target = target.map((ele: IData) => {
          return ele.id;
        });
        searchForm.state.data[item.formItemName] = target.join(',');
      } else {
        searchForm.state.data[item.formItemName] = null;
      }
      nextTick(() => {
        searchForm.search();
      });
    };
    const handleItems = (data: IData[]) => {
      data.forEach((formItem: IData) => {
        const itemData = formItem.getSelectItems();
        itemData.forEach((item: IData) => {
          items.value.push({
            id: item[formItem.keyName],
            name: item[formItem.textName],
            formItemName: item.formitem_name,
          });
        });
      });
    };

    watch(
      () => searchForm.state.data,
      () => {
        nextTick(() => {
          items.value = [];
          handleItems(searchForm.formItems);
        });
      },
      {
        deep: true,
      },
    );
    return {
      ns,
      c,
      items,
      remove,
      clearAll,
    };
  },
  render() {
    return (
      <div
        class={[
          this.ns.b(),
          this.ns.m(this.modelData.id),
          ...this.controller.containerClass,
        ]}
      >
        <div class={this.ns.e('left')}>
          <div>筛选条件：</div>
        </div>
        <div class={this.ns.e('content')}>
          <div class={this.ns.em('content', 'container')}>
            {this.items.map((item: IData, index: number) => {
              return (
                <div class={this.ns.e('item')} key={index}>
                  <span>{item.name}</span>
                  <ion-icon
                    name='close-outline'
                    class='selectitem-del'
                    onClick={() => this.remove(item)}
                  ></ion-icon>
                </div>
              );
            })}
          </div>
        </div>
        <div
          onClick={() => this.clearAll()}
          class={{
            [this.ns.e('right')]: true,
            [this.ns.em('right', 'disable')]: this.items.length === 0,
          }}
        >
          清空筛选条件
        </div>
      </div>
    );
  },
});
